<template>
  <div class="component-projectList">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>项目详情
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>后退
          </el-button>
        </div>
      </div>
    </div>
    <div class="contain">
      <div class="nav">
        项目详情
        <div class="f_btn" @click="$router.go(-1)">
          <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>
          <span>返回</span>
        </div>
      </div>
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="tabs">
        <el-tab-pane label="基础信息" name="first">
          <div class="tables">
            <table cellpadding="0" cellspacing="0" border="1">
              <tr>
                <td>项目编号</td>
                <td>{{baseInfo.proNo}}</td>
                <td>项目内部编号</td>
                <td>{{baseInfo.innerNo}}</td>
              </tr>
              <tr>
                <td>项目名称</td>
                <td>{{baseInfo.proName}}</td>
                <td>项目负责人</td>
                <td>{{baseInfo.userName}}</td>
              </tr>
              <tr>
                <td>所属合同类型</td>
                <td>{{baseInfo.contractType}}</td>
                <td>项目专业</td>
                <td>{{baseInfo.proMajorName}}</td>
              </tr>
              <tr>
                <td>年度</td>
                <td>{{baseInfo.proYear}}</td>
                <td>监理单位</td>
                <td>{{baseInfo.monitorOrgName}}</td>
              </tr>
              <tr>
                <td>设计单位</td>
                <td>{{baseInfo.designOrgName}}</td>
                <td>项目地址</td>
                <td>{{baseInfo.proAddr}}</td>
              </tr>
              <tr>
                <td>项目经纬度</td>
                <td>{{baseInfo.prolng && baseInfo.prolng?(baseInfo.prolng+','+baseInfo.proLat):''}}</td>
                <td>业主</td>
                <td>{{baseInfo.owner}}</td>
              </tr>
              <tr>
                <td>施工类型</td>
                <td>{{baseInfo.Constype}}</td>
                <td>经营模式</td>
                <td>{{baseInfo.proModel}}</td>
              </tr>
              <tr>
                <td>预计开工日期</td>
                <td>{{baseInfo.sworkdate|timeFilter}}</td>
                <td>预计完工日期</td>
                <td>{{baseInfo.eworkDate|timeFilter}}</td>
              </tr>
              <tr>
                <td>预计验收日期</td>
                <td>{{baseInfo.receptionDate|timeFilter}}</td>
                <td></td>
                <td></td>
              </tr>
            </table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="造价管理" name="second">
          <div class="costManage">
            <div class="left">
              <div class="cost">业主造价</div>
              <div>
                <span>预算金额：</span>
                <input v-model.number="costData.partyaBudget" disabled>
              </div>
              <div>
                <span>预结算金额：</span>
                <input v-model.number="costData.partyaPresettlement" disabled>
              </div>
              <div>
                <span>终结算金额：</span>
                <input v-model.number="costData.partyaEndsettlement" :disabled="costDisabled">
              </div>
              <div>
                <span>业主扣费：</span>
                <input v-model.number="costData.partyaDiscount" :disabled="costDisabled">
              </div>
            </div>
            <div class="right">
              <div class="cost">公司造价</div>
              <div>
                <span>预算金额：</span>
                <input v-model.number="costData.partybBudget" disabled>
              </div>
              <div>
                <span>预结算金额：</span>
                <input v-model.number="costData.partybPresettlement" disabled>
              </div>
              <div>
                <span>终结算金额：</span>
                <input v-model.number="costData.partybEndsettlement" :disabled="costDisabled">
              </div>
              <div>
                <span>结算折扣：</span>
                <input v-model.number="costData.partybDiscount" :disabled="costDisabled">
              </div>
            </div>
            <div class="costManage_btns">
              <button v-if="ms_roleName == 'ProjectClerk'" @click="costDisabled=!costDisabled">编辑</button>
              <button v-if="ms_roleName == 'ProjectClerk'" @click="costSubmit()">保存</button>
            </div>
          </div>
          <!--预算明细-->
          <div class="budgets">
            <div class="budget">
              <div class="title">预结算明细</div>
              <div></div>
            </div>
            <div class="budgetTable">
              <table cellpadding="0" cellspacing="0" border="1">
                <tr>
                  <th>费用名称</th>
                  <th>需要安装的设备费</th>
                  <th>建筑安装工程费</th>
                  <th>其他费用</th>
                  <th>除税价</th>
                  <th>增值税</th>
                  <th>含税价</th>
                </tr>
                <!--v-for="(item,index) in tab1" :key="index"-->
                <tr v-for="(item,index) in tab1" :key="index">
                  <th style="width: 400px;">{{item.rowName}}</th>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td>{{item.taxExcludingPrice}}</td>
                  <td></td>
                  <td></td>
                </tr>
                <!--<tr>
                <th style="color:#1abc9c;">总造价：</th>
                <td colspan="6">20000000</td>
                </tr>-->
              </table>
            </div>
          </div>
          <!--预结算明细-->
          <div class="budgets">
            <div class="budget">
              <div class="title">概预算明细</div>
              <div></div>
            </div>
            <div class="budgetTable">
              <table cellpadding="0" cellspacing="0" border="1">
                <tr>
                  <th>费用名称</th>
                  <th>需要安装的设备费</th>
                  <th>建筑安装工程费</th>
                  <th>其他费用</th>
                  <th>除税价</th>
                  <th>增值税</th>
                  <th>含税价</th>
                </tr>
                <!--v-for="(item,index) in tab1" :key="index"-->
                <tr v-for="(item,index) in tab2" :key="index">
                  <th style="width: 400px;">{{item.rowName}}</th>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td>{{item.taxExcludingPrice}}</td>
                  <td></td>
                  <td></td>
                </tr>
                <!--<tr>
                <th style="color:#1abc9c;">总造价：</th>
                <td colspan="6">20000000</td>
                </tr>-->
              </table>
            </div>
          </div>

          <!--终结算明细-->
          <div class="budgets">
            <div class="budget">
              <div class="title">终结算总表</div>
              <div></div>
            </div>
            <div class="budgetTable">
              <table cellpadding="0" cellspacing="0" border="1">
                <tr>
                  <th>费用名称</th>
                  <th>需要安装的设备费</th>
                  <th>建筑安装工程费</th>
                  <th>其他费用</th>
                  <th>除税价</th>
                  <th>增值税</th>
                  <th>含税价</th>
                </tr>
                <tr v-for="(item,index) in tab3" :key="index">
                  <th style="width: 400px;">{{item.rowName}}</th>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td>{{item.taxExcludingPrice}}</td>
                  <td></td>
                  <td></td>
                </tr>
              </table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="工程量管理" name="third">
          <div class="btn_group">
            <el-button-group>
              <el-button @click="subTitleTabs(1)" :autofocus="focus">管道队</el-button>
              <el-button @click="subTitleTabs(2)">线路队</el-button>
              <el-button @click="subTitleTabs(3)">设备队</el-button>
              <el-button @click="subTitleTabs(4)">熔纤队</el-button>
            </el-button-group>
          </div>
          <div class="gcl">
            <div class="title">{{subTitle}}</div>
            <el-table :data="infodetail" tooltip-effect="dark" style border>
              <el-table-column label="序号" align="center" width="100" type="index"></el-table-column>
              <el-table-column label="定额编号" align="center" width="130" prop="optionName"></el-table-column>
              <el-table-column label="施工内容" align="center" width="260" prop="itemContent"></el-table-column>
              <el-table-column label="单位" align="center" width="210" prop="itemUnit"></el-table-column>
              <el-table-column label="单价" align="center" width="210" prop="price"></el-table-column>
              <el-table-column label="预算数量" align="center" width="210" prop="settle"></el-table-column>
              <el-table-column label="预结算数量" align="center" width="210" prop="budget"></el-table-column>
              <el-table-column label="终结算数量" align="center" width="210" prop="finalbudget"></el-table-column>
              <el-table-column label="预算价格" align="center" width="210">
                <template slot-scope="scope">{{scope.row.price*scope.row.settle|numFilter}}</template>
              </el-table-column>
              <el-table-column label="预结算价格" align="center" width="210">
                <template slot-scope="scope">{{scope.row.price*scope.row.budget|numFilter}}</template>
              </el-table-column>
              <el-table-column label="终结算价格" align="center" width="210">
                <template slot-scope="scope">{{scope.row.price*scope.row.finalbudget|numFilter}}</template>
              </el-table-column>
            </el-table>
          </div>
          <div class="gcl_footer">
            <div class="gcl_footer_top">
              <span>预算费用总计：</span>
              <span>{{dataThree.settle}}</span>&nbsp;&nbsp;
              <span>预结算费用总计：</span>
              <span>{{dataThree.budget}}</span>
            </div>
            <div class="gcl_footer_bottom">
              <span>终结算费用总计：</span>
              <span>{{dataThree.finalbudget}}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="进度管理" name="fourth">
          <!-- <div class="step-container">
            <el-steps :active="step" align-center>
              <el-step :title="item.title" v-for="(item,index) in stepData" :key="index">
                <div slot="description">
                  <div>{{item.progressStauts || '暂无'}}</div>
                  <div style="width:80px;">{{item.time|dateFilter}}</div>
                </div>
              </el-step>
            </el-steps>
          </div>-->
          <div class="detailpro-amap">
            <!-- 地图展示 Start -->
            <read-only-amap
              style="margin-bottom:20px;"
              :readOnlyAmapData="readOnlyAmapData"
              v-loading="amapReadOnlyLoading"
              element-loading-text="地图加载中..."
              element-loading-spinner="el-icon-loading"
              v-if="!amapReadOnlyLoading"
            ></read-only-amap>
            <!-- 地图展示 End -->
          </div>
          <div class="pipe-progress" v-show="pipeInfo.detials">
            <div class="table-title">
              <p>
                <span class="iconfont">&#xe607;</span> 管道进度
              </p>
            </div>
            <div class="tables">
              <table cellpadding="0" cellspacing="0" border="1">
                <tr>
                  <td>施工队</td>
                  <td>{{ pipeInfo.orgName }}</td>
                  <td>工期</td>
                  <td>{{ pipeInfo.workTime }}</td>
                </tr>
                <tr>
                  <td>开工日期</td>
                  <td>{{pipeInfo.realSdate|timeFilter}}</td>
                  <td>完工日期</td>
                  <td>{{pipeInfo.realEdate|timeFilter}}</td>
                </tr>
              </table>
            </div>
            <div class="table">
              <el-table
                ref="multipleTable"
                :data="pipeInfo.detials"
                tooltip-effect="dark"
                style="width: 1100px;margin:0 auto"
                border
              >
                <el-table-column label="日期" align="center" width="110" prop>
                  <template slot-scope="scope">{{scope.row.createDate|timeFilter}}</template>
                </el-table-column>
                <el-table-column label="进行天数" align="center" width="100" prop="workDay"></el-table-column>
                <!-- <el-table-column label="线程/操作点" align="center" width="110" prop=""></el-table-column> -->
                <!-- <el-table-column label="操作方式" align="center" width="110" prop>
                  <template slot-scope="scope">{{scope.row.workDirection=='0'?'水平作业':'垂直作业'}}</template>
                </el-table-column>-->
                <el-table-column label="施工内容" align="center" width="120" prop="workName"></el-table-column>
                <el-table-column label="工作量" align="center" width="200" prop="workLoad"></el-table-column>
                <el-table-column label="单价" align="center" prop="workPrice"></el-table-column>
                <el-table-column label="总价" align="center" width="140" prop>
                  <template slot-scope="scope">{{scope.row.workPrice*scope.row.workLoad|numFilter}}</template>
                </el-table-column>
                <!-- <el-table-column label="备注" align="center" width="130" prop></el-table-column> -->
              </el-table>
            </div>
          </div>
          <div class="line-progress" v-show="lineInfo.detials">
            <div class="table-title">
              <p>
                <span class="iconfont">&#xe607;</span> 线路进度
              </p>
            </div>
            <div class="tables">
              <table cellpadding="0" cellspacing="0" border="1">
                <tr>
                  <td>施工队</td>
                  <td>{{lineInfo.orgName}}</td>
                  <td>工期</td>
                  <td>{{lineInfo.workTime}}</td>
                </tr>
                <tr>
                  <td>开工日期</td>
                  <td>{{lineInfo.realSdate|timeFilter}}</td>
                  <td>完工日期</td>
                  <td>{{lineInfo.realEdate|timeFilter}}</td>
                </tr>
              </table>
            </div>
            <div class="table">
              <el-table
                ref="multipleTable"
                :data="lineInfo.detials"
                tooltip-effect="dark"
                style="width: 1100px;margin:0 auto"
                border
              >
                <el-table-column label="日期" align="center" width="110" prop>
                  <template slot-scope="scope">{{scope.row.createDate|timeFilter}}</template>
                </el-table-column>
                <el-table-column label="进行天数" align="center" width="100" prop="workDay"></el-table-column>
                <el-table-column label="线程/操作点" align="center" width="110" prop="pointName"></el-table-column>
                <!-- <el-table-column label="操作方式" align="center" width="110" prop>
                  <template slot-scope="scope">{{scope.row.workDirection=='0'?'水平作业':'垂直作业'}}</template>
                </el-table-column>-->
                <el-table-column label="施工内容" align="center" width="120" prop="workName"></el-table-column>
                <el-table-column label="工作量" align="center" width="200" prop="workLoad"></el-table-column>
                <el-table-column label="单价" align="center" prop="workPrice"></el-table-column>
                <el-table-column label="总价" align="center" width="140" prop>
                  <template slot-scope="scope">{{scope.row.workPrice*scope.row.workLoad|numFilter}}</template>
                </el-table-column>
                <!-- <el-table-column label="备注" align="center" width="130" prop></el-table-column> -->
              </el-table>
            </div>
          </div>
          <div class="equipment-progress" v-show="equipmentInfo.detials">
            <div class="table-title">
              <p>
                <span class="iconfont">&#xe607;</span> 设备进度
              </p>
            </div>
            <div class="tables">
              <table cellpadding="0" cellspacing="0" border="1">
                <tr>
                  <td>施工队</td>
                  <td>{{equipmentInfo.orgName}}</td>
                  <td>工期</td>
                  <td>{{equipmentInfo.workTime}}</td>
                </tr>
                <tr>
                  <td>开工日期</td>
                  <td>{{equipmentInfo.realSdate|timeFilter}}</td>
                  <td>完工日期</td>
                  <td>{{equipmentInfo.realEdate|timeFilter}}</td>
                </tr>
              </table>
            </div>
            <div class="table">
              <el-table
                ref="multipleTable"
                :data="equipmentInfo.detials"
                tooltip-effect="dark"
                style="width: 1100px;margin:0 auto"
                border
              >
                <el-table-column label="日期" align="center" width="110" prop>
                  <template slot-scope="scope">{{scope.row.createDate|timeFilter}}</template>
                </el-table-column>
                <el-table-column label="进行天数" align="center" width="100" prop="workDay"></el-table-column>
                <el-table-column label="操作点" align="center" width="110" prop="pointName"></el-table-column>
                <!-- <el-table-column label="操作方式" align="center" width="110" prop>
                  <template slot-scope="scope">{{scope.row.workDirection=='0'?'水平作业':'垂直作业'}}</template>
                </el-table-column>-->
                <el-table-column label="施工内容" align="center" width="120" prop="workName"></el-table-column>
                <el-table-column label="工作量" align="center" width="200" prop="workLoad"></el-table-column>
                <el-table-column label="总价" align="center" width="140" prop>
                  <template slot-scope="scope">{{scope.row.workPrice*scope.row.workLoad|numFilter}}</template>
                </el-table-column>
                <el-table-column label="总价" align="center" width="140" prop></el-table-column>
                <!-- <el-table-column label="备注" align="center" width="130" prop></el-table-column> -->
              </el-table>
            </div>
          </div>
          <div class="equipment-progress" v-show="fiberInfo.detials">
            <div class="table-title">
              <p>
                <span class="iconfont">&#xe607;</span> 熔纤进度
              </p>
            </div>
            <div class="tables">
              <table cellpadding="0" cellspacing="0" border="1">
                <tr>
                  <td>施工队</td>
                  <td>{{fiberInfo.orgName}}</td>
                  <td>工期</td>
                  <td>{{fiberInfo.workTime}}</td>
                </tr>
                <tr>
                  <td>开工日期</td>
                  <td>{{fiberInfo.realSdate|timeFilter}}</td>
                  <td>完工日期</td>
                  <td>{{fiberInfo.realEdate|timeFilter}}</td>
                </tr>
              </table>
            </div>
            <div class="table">
              <el-table
                ref="multipleTable"
                :data="fiberInfo.detials"
                tooltip-effect="dark"
                style="width: 1100px;margin:0 auto"
                border
              >
                <el-table-column label="日期" align="center" width="110" prop>
                  <template slot-scope="scope">{{scope.row.createDate|timeFilter}}</template>
                </el-table-column>
                <el-table-column label="进行天数" align="center" width="100" prop="workDay"></el-table-column>
                <el-table-column label="操作点" align="center" width="110" prop="pointName"></el-table-column>
                <el-table-column label="熔纤线路" align="center" width="110" prop="lineName"></el-table-column>
                <!-- <el-table-column label="操作方式" align="center" width="110" prop>
                  <template slot-scope="scope">{{scope.row.workDirection=='0'?'水平作业':'垂直作业'}}</template>
                </el-table-column>-->
                <el-table-column label="施工内容" align="center" width="120" prop="workName"></el-table-column>
                <el-table-column label="工作量" align="center" width="200" prop="workLoad"></el-table-column>
                <el-table-column label="单价" align="center" prop="workPrice"></el-table-column>
                <el-table-column label="总价" align="center" width="140" prop>
                  <template slot-scope="scope">{{scope.row.workPrice*scope.row.workLoad|numFilter}}</template>
                </el-table-column>
                <!-- <el-table-column label="备注" align="center" width="130" prop></el-table-column> -->
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="材料管理" name="fiveth">
          <div class="material-manage">
            <div class="budget-material">
              <div class="search-header">
                <div class="left-title">
                  <p class="left-text">
                    <span class="iconfont">&#xe607;</span>
                    预算材料
                  </p>
                  <div class="right">
                    <!-- <button>导出列表</button> -->
                  </div>
                </div>
              </div>
              <div class="table" style="margin-top:0;">
                <el-table
                  ref="multipleTable"
                  :data="bugetMaterialList"
                  tooltip-effect="dark"
                  style="width: 1100px;margin:0 auto"
                  border
                  :max-height="500"
                >
                  <el-table-column label="序号" align="center" width="65" type="index"></el-table-column>
                  <el-table-column label="器材名称" align="center" width="140" prop="matName"></el-table-column>
                  <el-table-column label="规格程式" align="center" width="140" prop="matModel"></el-table-column>
                  <el-table-column label="单位" align="center" prop="matUnit"></el-table-column>
                  <el-table-column label="预算数量" align="center" width="140" prop="num"></el-table-column>
                  <el-table-column label="单价" align="center" width="140" prop="taxExcludingPrice"></el-table-column>
                  <el-table-column
                    label="合计"
                    align="center"
                    width="120"
                    prop="taxExcludingPriceSum"
                  ></el-table-column>
                  <el-table-column label="供方" align="center" width="120" prop="matType"></el-table-column>
                </el-table>
              </div>
            </div>
            <div class="budget-material">
              <div class="search-header">
                <div class="left-title">
                  <p class="left-text">
                    <span class="iconfont">&#xe607;</span>
                    甲供材料
                  </p>
                  <div class="right">
                    <!-- <button>导出列表</button> -->
                  </div>
                </div>
              </div>
              <div class="table" style="margin-top:0;">
                <el-table
                  ref="multipleTable"
                  :data="partyaList"
                  tooltip-effect="dark"
                  style="width: 1100px;margin:0 auto"
                  border
                  :max-height="500"
                >
                  <el-table-column label="序号" align="center" width="65" type="index"></el-table-column>
                  <el-table-column label="器材名称" align="center" width="140" prop="matName"></el-table-column>
                  <el-table-column label="器材编码" align="center" width="140" prop="deviceNum"></el-table-column>
                  <el-table-column label="规格程式" align="center" width="140" prop="matModel"></el-table-column>
                  <el-table-column label="单位" align="center" prop="matUnit"></el-table-column>
                  <el-table-column label="数量" align="center" width="140" prop="useNum"></el-table-column>
                  <el-table-column label="单价" align="center" width="140" prop="price"></el-table-column>
                  <el-table-column label="合计" align="center" width="120" prop="totalPrice"></el-table-column>
                </el-table>
              </div>
            </div>
            <div class="budget-material">
              <div class="search-header">
                <div class="left-title">
                  <p class="left-text">
                    <span class="iconfont">&#xe607;</span>
                    项目使用材料
                  </p>
                  <div class="right">
                    <!-- <button>导出列表</button> -->
                  </div>
                </div>
              </div>
              <div class="table" style="margin-top:0;">
                <el-table
                  ref="multipleTable"
                  :data="userList"
                  tooltip-effect="dark"
                  style="width: 1100px;margin:0 auto"
                  border
                  :max-height="500"
                >
                  <el-table-column label="序号" align="center" width="65" type="index"></el-table-column>
                  <el-table-column label="供方" align="center" width="140" prop="matType"></el-table-column>
                  <el-table-column label="器材名称" align="center" width="140" prop="matName"></el-table-column>
                  <el-table-column label="规格程式" align="center" prop="matModel"></el-table-column>
                  <el-table-column label="器材编码" align="center" width="140" prop="deviceNum"></el-table-column>
                  <!-- <el-table-column label="型号" align="center" width="140" prop></el-table-column> -->
                  <el-table-column label="单位" align="center" width="140" prop="matUnit"></el-table-column>
                  <el-table-column label="施工队预结算数量" align="center" width="120" prop="num"></el-table-column>
                  <!-- <el-table-column label="修改数量" align="center" width="140" prop=""></el-table-column> -->
                  <el-table-column label="操作" align="center" width="110" prop>
                    <template slot-scope="scope">
                      <a href="javaScript:;" class="red" @click="lookUsePic(scope.row.photo)">查看使用图</a>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <!-- 项目结算材料 -->
            <!-- <div class="budget-material">
              <div class="search-header">
                <div class="left-title">
                  <p class="left-text">
                    <span class="iconfont">&#xe607;</span>
                    项目结算材料
                  </p>
                  <div class="right">
                    <button @click="materailFlag = !materailFlag">{{materailFlag?'编辑':'取消'}}</button>
                    <button @click="materSave">保存</button>
                  </div>
                </div>
              </div>
              <div class="table" style="margin-top:0;">
                <el-table
                  ref="multipleTable"
                  :data="payMaterials"
                  tooltip-effect="dark"
                  style="width: 1100px;margin:0 auto"
                  border
                  :max-height="500"
                >
                  <el-table-column label="序号" align="center" width="65" type="index"></el-table-column>
                  <el-table-column label="供方" align="center" width="140" prop=""></el-table-column>
                  <el-table-column label="器材名称" align="center" width="140" prop=""></el-table-column>
                  <el-table-column label="规格程式" align="center" prop=""></el-table-column>
                  <el-table-column label="器材编码" align="center" width="140" prop=""></el-table-column>
                  <el-table-column label="型号" align="center" width="140" prop=""></el-table-column>
                  <el-table-column label="单位" align="center" width="140" prop=""></el-table-column>
                  <el-table-column label="施工结算数量" align="center" width="120" prop="">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.finalNum" :disabled="materailFlag"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="终结算数量" align="center" width="140" prop=""></el-table-column>
                </el-table>
              </div>
            </div>-->
          </div>
        </el-tab-pane>
        <el-tab-pane label="资料归档" name="sixth">
          <div class="data-back-sign">
            <div class="table-title">
              <p>
                <span class="iconfont">&#xe607;</span> 资料归档标志
              </p>
            </div>
            <div class="tables">
              <div class="box" v-for="(item,index) in dataStatus" :key="index">
                <div>{{item.constName}}</div>
                <div>
                  <span>{{item.isUpload == 1?'已上传':'未上传'}}</span>
                  <el-checkbox :value="item.isUpload==1" disabled></el-checkbox>
                </div>
              </div>

              <!-- :checked="item.isUpload == 1" -->
              <div class="box">
                <div></div>
                <div></div>
              </div>
            </div>
          </div>
          <div class="owner-data">
            <div class="table-title">
              <p>
                <span class="iconfont">&#xe607;</span> 甲方资料（项目部）
                <span class="table-title-left">需：委托单/设计图纸</span>
              </p>
            </div>
            <div class="table">
              <el-table
                ref="multipleTable"
                :data="ownerData"
                tooltip-effect="dark"
                style="width: 1100px;margin:0 auto"
                border
              >
                <el-table-column label="文件类别" align="center" width="170" prop="label"></el-table-column>
                <el-table-column label="附件下载" align="center">
                  <template slot-scope="scope">
                    <a
                      :href="baseUrl+scope.row.data.fileUrl"
                      :download="scope.row.data.fileName"
                      class="red"
                      target="_block"
                    >{{scope.row.data.fileName}}</a>
                    <!-- <a
                    @click.prevent="downLoadFile(scope.row.data.fileUrl,scope.row.data.fileName)"
                    class="red"
                    >{{scope.row.data.fileName}}</a>-->
                  </template>
                </el-table-column>
                <el-table-column label="上传人" align="center" width="150" prop="data.createUser"></el-table-column>
                <el-table-column label="操作" align="center" width="350">
                  <template slot-scope="scope">
                    <el-upload
                      class="upload-demo"
                      action="/api/web/sysFile/uploadFile"
                      :headers="myheader"
                      :data="scope.row.exe_data"
                      :on-success="handleSuccess"
                      :before-upload="BeforeUploadFn"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :limit="1"
                      accept=".jpg, .jpeg, .png, .pdf, .dwg, .xls, .xlsx, .doc, .docx, .JPG, .JPEG, .PNG, .PDF, .DWG, .XLS, .XLSX, .DOC, .DOCX"
                      :on-exceed="handleExceed"
                      :file-list="fileList"
                      v-show="!scope.row.data.fileUrl"
                    >
                      <el-button type="text" size="small" class="red">上传</el-button>
                    </el-upload>
                    <div>
                      <el-button
                        v-show="scope.row.data.fileUrl"
                        @click="delFile(scope.row)"
                        type="text"
                        size="small"
                        class="red"
                      >删除</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="design-check-data">
            <div class="table-title">
              <p>
                <span class="iconfont">&#xe607;</span> 设计审核资料（支撑部）
                <span class="table-title-left">需：设计图纸审核版/预算审核版/工程量表/材料计划用量表</span>
              </p>
            </div>
            <div class="table">
              <el-table
                ref="multipleTable"
                :data="designCheckData"
                tooltip-effect="dark"
                style="width: 1100px;margin:0 auto"
                border
              >
                <el-table-column label="文件类别" align="center" width="170" prop="label"></el-table-column>
                <el-table-column label="附件下载" align="center" prop>
                  <template slot-scope="scope">
                    <a
                      :href="baseUrl+scope.row.data.fileUrl"
                      :download="scope.row.data.fileName"
                      class="red"
                      target="_block"
                    >{{scope.row.data.fileName}}</a>
                  </template>
                </el-table-column>
                <el-table-column label="上传人" align="center" width="150" prop="data.createUser"></el-table-column>
                <el-table-column label="操作" align="center" width="350" prop>
                  <template slot-scope="scope">
                    <el-upload
                      class="upload-demo"
                      action="/api/web/sysFile/uploadFile"
                      :headers="myheader"
                      :data="scope.row.exe_data"
                      :on-preview="handlePreview"
                      :on-success="handleSuccess"
                      :before-upload="BeforeUploadFn"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :limit="1"
                      accept=".jpg, .jpeg, .png, .pdf, .dwg, .xls, .xlsx, .doc, .docx, .JPG, .JPEG, .PNG, .PDF, .DWG, .XLS, .XLSX, .DOC, .DOCX"
                      :on-exceed="handleExceed"
                      :file-list="fileList"
                      v-show="!scope.row.data.fileUrl"
                    >
                      <el-button type="text" size="small" class="red">上传</el-button>
                    </el-upload>
                    <el-button
                      v-show="scope.row.data.fileUrl"
                      @click="delFile(scope.row)"
                      type="text"
                      size="small"
                      class="red"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="project-finish-data">
            <div class="table-title">
              <p>
                <span class="iconfont">&#xe607;</span> 项目完工资料（项目部）
                <span
                  class="table-title-left"
                >需：完工草图/完工材料表/完工照片/测试资料/初步竣工图/验收资料/验收签证/施工确价签字版</span>
              </p>
            </div>
            <div class="table">
              <el-table
                ref="multipleTable"
                :data="projectFinishData"
                tooltip-effect="dark"
                style="width: 1100px;margin:0 auto"
                border
              >
                <el-table-column label="文件类别" align="center" width="170" prop="label"></el-table-column>
                <el-table-column label="附件下载" align="center" prop>
                  <template slot-scope="scope">
                    <a
                      :href="baseUrl+scope.row.data.fileUrl"
                      :download="scope.row.data.fileName"
                      class="red"
                      target="_block"
                    >{{scope.row.data.fileName}}</a>
                  </template>
                </el-table-column>
                <el-table-column label="上传人" align="center" width="150" prop="data.createUser"></el-table-column>
                <el-table-column label="操作" align="center" width="350" prop>
                  <template slot-scope="scope">
                    <el-upload
                      class="upload-demo"
                      action="/api/web/sysFile/uploadFile"
                      :headers="myheader"
                      :data="scope.row.exe_data"
                      :on-preview="handlePreview"
                      :on-success="handleSuccess"
                      :before-upload="BeforeUploadFn"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :limit="1"
                      accept=".jpg, .jpeg, .png, .pdf, .dwg, .xls, .xlsx, .doc, .docx, .JPG, .JPEG, .PNG, .PDF, .DWG, .XLS, .XLSX, .DOC, .DOCX"
                      :on-exceed="handleExceed"
                      :file-list="fileList"
                      v-show="!scope.row.data.fileUrl"
                    >
                      <el-button type="text" size="small" class="red">上传</el-button>
                    </el-upload>
                    <el-button
                      v-show="scope.row.data.fileUrl"
                      @click="delFile(scope.row)"
                      type="text"
                      size="small"
                      class="red"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="official-data">
            <div class="table-title">
              <p>
                <span class="iconfont">&#xe607;</span> 正式结算资料（支撑部）
                <span class="table-title-left">需：终版竣工图/预结算/发文文件/交、竣工资料</span>
              </p>
            </div>
            <div class="table">
              <el-table
                ref="multipleTable"
                :data="officialData"
                tooltip-effect="dark"
                style="width: 1100px;margin:0 auto"
                border
              >
                <el-table-column label="文件类别" align="center" width="170" prop="label"></el-table-column>
                <el-table-column label="附件下载" align="center" prop>
                  <template slot-scope="scope">
                    <a
                      :href="baseUrl+scope.row.data.fileUrl"
                      :download="scope.row.data.fileName"
                      class="red"
                      target="_block"
                    >{{scope.row.data.fileName}}</a>
                  </template>
                </el-table-column>
                <el-table-column label="上传人" align="center" width="150" prop="data.createUser"></el-table-column>
                <el-table-column label="操作" align="center" width="350" prop>
                  <template slot-scope="scope">
                    <el-upload
                      class="upload-demo"
                      action="/api/web/sysFile/uploadFile"
                      :headers="myheader"
                      :data="scope.row.exe_data"
                      :on-preview="handlePreview"
                      :on-success="handleSuccess"
                      :before-upload="BeforeUploadFn"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :limit="1"
                      accept=".jpg, .jpeg, .png, .pdf, .dwg, .xls, .xlsx, .doc, .docx, .JPG, .JPEG, .PNG, .PDF, .DWG, .XLS, .XLSX, .DOC, .DOCX"
                      :on-exceed="handleExceed"
                      :file-list="fileList"
                      v-show="!scope.row.data.fileUrl"
                    >
                      <el-button type="text" size="small" class="red">上传</el-button>
                    </el-upload>
                    <el-button
                      v-show="scope.row.data.fileUrl"
                      @click="delFile(scope.row)"
                      type="text"
                      size="small"
                      class="red"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="move-system-data">
            <div class="table-title">
              <p>
                <span class="iconfont">&#xe607;</span> 移动系统资料（驻点）
                <span class="table-title-left">需：跳钎表/转资套装</span>
              </p>
            </div>
            <div class="table">
              <el-table
                ref="multipleTable"
                :data="movePiontData"
                tooltip-effect="dark"
                style="width: 1100px;margin:0 auto"
                border
              >
                <el-table-column label="文件类别" align="center" width="170" prop="label"></el-table-column>
                <el-table-column label="附件下载" align="center" prop>
                  <template slot-scope="scope">
                    <a
                      :href="baseUrl+scope.row.data.fileUrl"
                      :download="scope.row.data.fileName"
                      class="red"
                      target="_block"
                    >{{scope.row.data.fileName}}</a>
                  </template>
                </el-table-column>
                <el-table-column label="上传人" align="center" width="150" prop="data.createUser"></el-table-column>
                <el-table-column label="操作" align="center" width="350" prop>
                  <template slot-scope="scope">
                    <el-upload
                      class="upload-demo"
                      action="/api/web/sysFile/uploadFile"
                      :headers="myheader"
                      :data="scope.row.exe_data"
                      :on-success="handleSuccess"
                      :on-preview="handlePreview"
                      :before-upload="BeforeUploadFn"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      multiple
                      :limit="1"
                      accept=".jpg, .jpeg, .png, .pdf, .dwg, .xls, .xlsx, .doc, .docx, .JPG, .JPEG, .PNG, .PDF, .DWG, .XLS, .XLSX, .DOC, .DOCX"
                      :on-exceed="handleExceed"
                      :file-list="fileList"
                      v-show="!scope.row.data.fileUrl"
                    >
                      <el-button type="text" size="small" class="red">上传</el-button>
                    </el-upload>
                    <el-button
                      v-show="scope.row.fileUrl"
                      @click="delFile(scope.row)"
                      type="text"
                      size="small"
                      class="red"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="移动信息" name="seventh">
          <div class="move-system-msg">
            <div class="table-title">
              <p>
                <span class="iconfont">&#xe607;</span> 移动系统信息
              </p>
              <div v-show="ms_roleName == 'ProjectClerk'" class="btn-group-right">
                <span @click="moveSystemFlag=!moveSystemFlag">{{moveSystemFlag?'编辑':'取消'}}</span>
                <span @click="moveInfoSubmit">保存</span>
              </div>
            </div>
            <div class="tables">
              <table cellpadding="0" cellspacing="0" border="1">
                <tr>
                  <td>服开工单号</td>
                  <td>
                    <el-input v-model="moveSystem.openNumber" :disabled="moveSystemFlag"></el-input>
                  </td>
                  <!-- <td>服开环节</td>
                  <td>
                    <el-input v-model="moveSystem.openLink" :disabled="moveSystemFlag"></el-input>
                  </td>-->
                  <td>纤芯申请工单号</td>
                  <td>
                    <el-input v-model="moveSystem.skipfiberOrderNumber" :disabled="moveSystemFlag"></el-input>
                  </td>
                  <td>验收批次</td>
                  <td>
                    <el-input v-model="moveSystem.receptionNumber" :disabled="moveSystemFlag"></el-input>
                  </td>
                </tr>

                <tr>
                  <td>是否二次进场</td>
                  <td>
                    <el-select
                      v-model="moveSystem.orEntry"
                      :disabled="moveSystemFlag"
                      placeholder="请选择"
                    >
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                    </el-select>
                  </td>
                  <td>OLT是否下沉</td>
                  <td>
                    <el-select
                      v-model="moveSystem.oltOrSink"
                      :disabled="moveSystemFlag"
                      placeholder="请选择"
                    >
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                    </el-select>
                  </td>
                  <td>接入模式</td>
                  <td>
                    <el-input v-model="moveSystem.receiveMode" :disabled="moveSystemFlag"></el-input>
                  </td>
                </tr>

                <tr>
                  <td>派单时间</td>
                  <td>
                    <el-date-picker
                      v-model="moveSystem.orderTime"
                      type="date"
                      placeholder="选择日期"
                      :disabled="moveSystemFlag"
                      clearable
                      value-format="timestamp"
                    ></el-date-picker>
                  </td>
                  <td>进场时间</td>
                  <td>
                    <el-date-picker
                      v-model="moveSystem.entryTime"
                      type="date"
                      placeholder="选择日期"
                      :disabled="moveSystemFlag"
                      clearable
                      value-format="timestamp"
                    ></el-date-picker>
                  </td>
                  <td>验收时间</td>
                  <td>
                    <el-date-picker
                      v-model="moveSystem.receptionTime"
                      type="date"
                      placeholder="选择日期"
                      :disabled="moveSystemFlag"
                      clearable
                      value-format="timestamp"
                    ></el-date-picker>
                  </td>
                </tr>

                <tr>
                  <td>是否有皮线入户</td>
                  <td>
                    <el-select
                      v-model="moveSystem.orLeatherHouse"
                      :disabled="moveSystemFlag"
                      placeholder="请选择"
                    >
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                    </el-select>
                  </td>
                  <td>FTTH栋数</td>
                  <td>
                    <el-input v-model="moveSystem.ftthBuildNumber" :disabled="moveSystemFlag"></el-input>
                  </td>
                  <td>PON口数</td>
                  <td>
                    <el-input v-model="moveSystem.ponNumber" :disabled="moveSystemFlag"></el-input>
                  </td>
                </tr>
                <tr>
                  <td>覆盖户数</td>
                  <td>
                    <el-input v-model="moveSystem.coverNumber" :disabled="moveSystemFlag"></el-input>
                  </td>
                  <td>SLA是否超时</td>
                  <td>
                    <el-select
                      v-model="moveSystem.slaTimeout"
                      :disabled="moveSystemFlag"
                      placeholder="请选择"
                    >
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                    </el-select>
                  </td>
                  <td>移动社区经理</td>
                  <td>
                    <el-input v-model="moveSystem.communityManage" :disabled="moveSystemFlag"></el-input>
                  </td>
                </tr>
                <tr>
                  <td>小区联系方式</td>
                  <td>
                    <el-input v-model="moveSystem.communityNumber" :disabled="moveSystemFlag"></el-input>
                  </td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                </tr>
              </table>
            </div>
          </div>
          <div class="jump-fiber" style="margin-top:20px;">
            <div class="table-title">
              <p>
                <span class="iconfont">&#xe607;</span> 跳纤信息
              </p>
              <div v-show="ms_roleName == 'ProjectClerk'" class="btn-group-right">
                <span @click="jumpInfoAdd">添加</span>
              </div>
            </div>
            <div class="table">
              <el-table
                ref="multipleTable"
                :data="jumpFiberData"
                tooltip-effect="dark"
                style="width: 1100px;margin:0 auto"
                border
              >
                <!-- <el-table-column label="合纤芯申请工单号" align="center" width="290" prop="jobNumber">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      v-model="scope.row.jobNumber"
                      :disabled="scope.row.display"
                    ></el-input>
                  </template>
                </el-table-column>-->
                <el-table-column label="验收站点名称" align="center" width="340" prop="receptionSiteName">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      v-model="scope.row.receptionSiteName"
                      :disabled="scope.row.display"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="站点属性" align="center" width="340" prop="siteAttribute">
                  <template slot-scope="scope">
                    <el-input
                      size="small"
                      v-model="scope.row.siteAttribute"
                      :disabled="scope.row.display"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column v-if="ms_roleName == 'ProjectClerk'" label="操作" align="center">
                  <template slot-scope="scope">
                    <a class="red" @click="jumpEdit(scope.row)">{{scope.row.display?'编辑':'取消编辑'}}</a>
                    <a class="red" @click="jumpInfoSubmit(scope.row)">保存</a>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="jump-fiber" style="margin-top:20px;">
            <div class="table-title">
              <p>
                <span class="iconfont">&#xe607;</span> 项目分数
              </p>
            </div>
            <div class="table" style="text-align:left;margin-left:60px;">
              <el-form :inline="true" :model="makePoint" class="demo-form-inline">
                <el-form-item label="甲方打分：">
                  <el-input
                    v-model="makePoint.point"
                    placeholder="请打分"
                    clearable
                    style="width:217px;"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="预算绘图" name="budget">
          <!-- 地图 proAmap Start -->
          <div class="detailpro-amap">
            <pro-amap :proAmapData="proAmapData" v-if="!amapLoading"></pro-amap>
          </div>
          <!-- 地图 proAmap End -->
        </el-tab-pane>
      </el-tabs>
      <!--查看现场记录图 弹框-->
      <div class="component-model">
        <el-dialog title="施工队现场记录图" :visible.sync="imgModel" width="600px"></el-dialog>
      </div>

      <!-- 打查看现场记录图-照片弹窗列表 -->
      <div class="component-model">
        <el-dialog title="照片列表" :visible.sync="lookUsePicInfo.flag" width="1140px">
          <div class="input-box">
            <div class="checkbox">
              <el-table
                ref="multipleTable"
                :data="lookUsePicInfo.photoList"
                tooltip-effect="dark"
                style="width:100%"
                border
              >
                <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
                <el-table-column label="照片名称" align="center" width="300" prop="fileName"></el-table-column>
                <el-table-column label="点击预览" align="center" prop>
                  <template slot-scope="scope">
                    <a
                      href="javaScript:;"
                      @click="openPhoto(scope.row.fileUrl)"
                      class="red"
                    >{{scope.row.fileName}}</a>
                  </template>
                </el-table-column>
                <el-table-column label="点击下载" align="center" prop>
                  <template slot-scope="scope">
                    <a
                      :href="baseUrl + scope.row.fileUrl"
                      :download="scope.row.fileName"
                      class="red"
                    >{{scope.row.fileName}}</a>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="lookUsePicInfo.flag = false">确定</el-button>
          </span>
        </el-dialog>
      </div>
      <!-- 查看现场记录图-预览照片 -->
      <div class="component-model">
        <el-dialog title="预览照片" :visible.sync="checkPhoto" width="1140px">
          <div class="input-box">
            <div class="checkbox">
              <img :src="checkPhotoUrl" style="max-width:900px;margin:10px auto">
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="checkPhoto = false">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import readOnlyAmap from '@/components/common/amap/readOnlyAmap'
import proAmap from '@/components/common/amap/proAmap'
export default {
  name: 'detailpro',
  components: {
    readOnlyAmap,
    proAmap
  },
  data() {
    return {
      // 缓存token
      myheader: { token: localStorage.getItem('token') },
      //  文件基础路径
      baseUrl: img_url,
      // 角色
      ms_roleName: localStorage.getItem('roleName'),
      // 选项卡 name 值
      activeName: 'first',
      // --------------------------------------项目详情----------------------------------------------
      // 基础信息
      baseInfo: {},
      //项目详情-造价管理-编辑控制业主跟公司造价的disabled属性
      costDisabled: true,
      // --------------------------------------造价管理----------------------------------------------
      // 造价管理 - 业主造价 - 公司造价
      costData: {},
      // 造价管理 预算明细
      tab1: [],
      // 造价管理 预结算明细
      tab2: [],
      // 造价管理 终结算明细
      tab3: [],
      // --------------------------------------工程量管理--------------------------------------------
      //工程量管理-工程量明细
      infodetail: [],
      // 工程量管理-子表格title
      subTitle: '线路队',
      //  工程量管理 按钮组 autofocus
      focus: true,
      // 工程量管理 3个结算数据
      dataThree: {
        settle: '',
        budget: '',
        finalbudget: ''
      },
      //查看现场记录图model
      imgModel: false,
      // --------------------------------------进度管理----------------------------------------------
      // 当前进度步数
      step: 1,
      // 进度条数据
      stepData: [],
      // 进度管理 管道表格数据
      pipeInfo: {
        orgName: '',
        details: []
      },
      // 进度管理 线路表格数据
      lineInfo: {
        orgName: '',
        details: []
      },
      // 进度管理 设备表格数据
      equipmentInfo: {
        orgName: '',
        details: []
      },
      // 进度管理 熔纤表格数据
      fiberInfo: {
        orgName: '',
        details: []
      },
      // --------------------------------------材料管理----------------------------------------------
      // 预算材料
      bugetMaterialList: [],
      // 甲供材料
      partyaList: [],
      // 项目使用材料
      userList: [{}],
      // 项目结算材料
      payMaterials: [{}],
      // 项目结算材料是否可编辑
      materailFlag: true,
      // 查看使用图 弹窗
      lookUsePicInfo: {
        flag: false,
        photoList: []
      },
      // 预览照片弹窗
      checkPhoto: false,
      // 预览照片的url
      checkPhotoUrl: '',
      // --------------------------------------资料归档----------------------------------------------
      //资料归档 data
      dataStatus: [],
      //   甲方甲方资料（项目部）表格数据
      ownerData: [
        {
          label: '委托单',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'project.entrust.bill',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '设计图纸',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'project.design.drawing',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        }
      ],
      //   设计审核资料（支撑部）表格数据
      designCheckData: [
        {
          label: '设计图纸审核版',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'design.drawing.audit.edition',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '预算审核版',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'budget.audit.edition',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '工程量表',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'engineering.scale',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '材料计划用量表',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'materia.schedule',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        }
      ],
      //   项目完工资料（项目部）表格数据
      projectFinishData: [
        {
          label: '完工草图',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'project.finish.photo',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '完工材料表',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'finished_material',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '完工照片',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'project.complete.photo',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '测试资料',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'project.test',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '初步竣工图',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'preliminary.completion.plan',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '验收资料',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'project.settlement',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '验收签证',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'acceptance.visa',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '施工确价签字版',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'construction.valuation.signature.edition',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        }
      ],
      //   正式结算资料（支撑部）表格数据
      officialData: [
        {
          label: '终版竣工图',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'final.edition.completion.drawing',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '预结算',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'pre.settlement',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '发文资料',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'dispatch.document',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '交、竣工资料',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'delivery.and.completion.of.data',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        }
      ],
      //   移动系统资料（驻点）表格数据
      movePiontData: [
        {
          label: '跳纤表',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'jumping.meter',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        },
        {
          label: '转资套装',
          exe_data: {
            parentId: this.$route.params.info,
            bizType: 'transfer.package',
            userId: localStorage.getItem('ms_userId')
          },
          data: {}
        }
      ],
      fileList: [],
      // 资料归档
      checkValue: [],
      // --------------------------------------移动信息----------------------------------------------
      // 移动信息上方列表
      moveSystem: {
        moveProId: '',
        openNumber: '',
        openLink: '',
        receptionNumber: '',
        orEntry: '',
        oltOrSink: '',
        receiveMode: '',
        orLeatherHouse: '',
        ftthBuildNumber: '',
        coverNumber: '',
        communityManage: '',
        orderTime: '',
        entryTime: '',
        receptionTime: '',
        communityNumber: '',
        slaTimeout: '',
        skipfiberOrderNumber: '',
        ponNumber: ''
      },
      // 跳纤
      jumpFiberData: [{ display: true }],
      moveSystemFlag: true,
      // 移动信息-甲方打分
      makePoint: {
        point: ''
      },
      //-------------------------------------- 地图 ----------------------------------------------
      // amap
      proAmapData: {}, // 文员绘图地图数据
      readOnlyAmapData: {}, // 施工队地图只读数据
      amapLoading: true, // 控制地图loading
      amapReadOnlyLoading: true
    }
  },
  created() {},
  mounted() {
    if (this.$route.params) {
      this.activeName = this.$route.params.tabs
    }
    this.baseInfoInit()
  },
  methods: {
    //tab切换
    handleClick(tab, event) {
      switch (this.activeName) {
        case 'first':
          this.baseInfoInit()
          break
        case 'second':
          this.costInfo()
          // this.tabClick();
          break
        case 'third':
          this.quantitiesInfoInit()
          break
        case 'fourth':
          this.stepTableInit()
          this.getReadOnlyAmapData()
          break
        case 'fiveth':
          this.materDataInit()
          break
        case 'sixth':
          this.dataUploadInfoInit()
          break
        case 'seventh':
          this.moveInfoInit()
          break
        case 'budget':
          this.getProAmapData()
          break
      }
    },
    // 基础信息
    baseInfoInit() {
      let that = this
      that.$https({
        url: '/api/web/proProject/selectByProId',
        methods: 'post',
        data: { proId: that.$route.params.info },
        success: res => {
          console.log('基础信息：', res)
          that.baseInfo = res.data.data
        },
        error: res => {}
      })
    },
    // 造价管理 信息 查询
    costInfo() {
      let that = this,
        suCb = res => {
          console.log('造价信息：', res)
          that.costData = that.deepClone(res.data.data.res) || {}
          that.tab1 = res.data.data.settlementList || []
          that.tab2 = res.data.data.preSettlementList || []
        },
        erCb = res => {},
        req = {
          // url: "/api/web/proProject/queryDetailCost",
          url: '/api/web/proBudgetTableCol/selectProBuget',
          methods: 'post',
          data: { proId: that.$route.params.info },
          success: suCb,
          error: erCb
        }
      that.$https(req)
    },
    // 造价管理 预算查询
    tabClick() {
      let that = this,
        suCb = res => {
          that.tab1 = res.data.data
          console.log('预算查询结果', res.data)
        },
        erCb = res => {},
        palyParam = {
          url: '/api/web/proBudgetTableCol/selectProBugetTable15',
          methods: 'post',
          data: {
            proId: that.$route.params.info,
            sheetCode: '1.1',
            settlementType: '0'
          },
          success: suCb,
          error: erCb
        }
      that.$https(palyParam)
    },
    // 项目部文员-造价管理-提交造价预算更改
    costSubmit() {
      let that = this,
        suCb = res => {
          console.log('编辑提交信息：', res)
          that.$msg('提交成功！')
          that.costDisabled = true
          that.costInfo()
        },
        erCb = res => {},
        req = {
          url: '/api/web/proProject/countBudgetByProid',
          methods: 'post',
          data: {
            proId: that.$route.params.info,
            partybEndsettlement: that.costData.partybEndsettlement + '',
            partybDiscount: that.costData.partybDiscount + '',
            partyaEndsettlement: that.costData.partyaEndsettlement + '',
            partyaDiscount: that.costData.partyaDiscount + ''
          },
          success: suCb,
          error: erCb
        }
      console.log('编辑提交的参数：', req.data)
      that.$https(req)
    },

    // 子级按钮切换
    subTitleTabs(flag) {
      console.log(flag)
      switch (flag) {
        case 1:
          this.subTitle = '管道队'
          // this.quantitiesInfoInit("1");
          break
        case 2:
          this.subTitle = '线路队'
          // this.quantitiesInfoInit("2");
          break
        case 3:
          this.subTitle = '设备队'
          // this.quantitiesInfoInit("3");
          break
        case 4:
          this.subTitle = '熔纤队'
          // this.quantitiesInfoInit("4");
          break
      }
      this.quantitiesInfoInit(flag + '')
    },
    // 工程量信息4

    quantitiesInfoInit(type = '1') {
      let that = this,
        suCb = res => {
          console.log('工程量信息：', res)
          that.infodetail = res.data.data.workLoads
          that.dataThree = res.data.data.budget || {
            settle: '',
            budget: '',
            finalbudget: ''
          }
        },
        erCb = res => {
          console.log(res)
        },
        req = {
          url: '/api/web/proProject/queryWorkLoad',
          methods: 'post',
          data: {
            proId: that.$route.params.info,
            // workType: type?type:'1'
            workType: type
          },
          success: suCb,
          error: erCb
        }
      that.$https(req)
    },

    // 进度管理
    stepTableInit() {
      let that = this,
        suCb = res => {
          console.log('表格信息：', res)
          // 进度条先隐藏
          // that.stepData = that.deepClone(res.data.data.progressList);
          // that.step = res.data.data.progressList.length;
          // for (let i = that.stepData.length; i < 11; i++) {
          //   that.stepData.push([]);
          // }
          let callBack = type => {
            let result =
              res.data.data.teamProgresses.filter(item => {
                return item.type == type
              })[0] || {}
            return result
          }
          that.pipeInfo = callBack('管道')
          that.lineInfo = callBack('线路')
          that.equipmentInfo = callBack('设备')
          that.fiberInfo = callBack('熔纤')
          // that.pipeInfo = res.data.data.teamProgresses.filter(item => {
          //   return item.type == "管道";
          // })[0] || {};
        },
        erCb = res => {},
        req = {
          url: '/api/web/proProject/queryProgress',
          methods: 'post',
          data: {
            proId: that.$route.params.info
          },
          success: suCb,
          error: erCb
        }
      that.$https(req)
    },
    // 材料管理 - 信息查询
    materDataInit() {
      let that = this,
        suCb = res => {
          console.log('表格信息：', res)
          that.bugetMaterialList = that.deepClone(res.data.bugetMaterialList)
          that.partyaList = that.deepClone(res.data.partyaList)
          that.userList = that.deepClone(res.data.userList)
        },
        erCb = res => {},
        req = {
          url: '/api/web/proProject/selectBugetMaterial',
          methods: 'post',
          data: {
            proId: that.$route.params.info
          },
          success: suCb,
          error: erCb
        }
      that.$https(req)
    },
    // 材料管理 查看使用图
    lookUsePic(list) {
      this.lookUsePicInfo.flag = true
      this.lookUsePicInfo.photoList = list
    },
    openPhoto(url) {
      this.checkPhoto = true
      this.checkPhotoUrl = this.baseUrl + url
    },
    // 材料管理 保存按钮
    materSave() {
      // 判断条件还需在修改
      if (
        this.materailFlag ||
        this.payMaterials.filter(item => {
          return item.finalNum === ''
        }).length > 0
      ) {
        this.$erMsg('先编辑，再保存')
      } else {
        let that = this,
          suCb = res => {
            console.log(res)
            that.$msg('提交成功')
            that.materailFlag = true
          },
          erCb = res => {},
          postData = that.deepClone(that.payMaterials),
          req = {
            url: '/api/web/',
            methods: 'post',
            data: postData,
            success: suCb,
            error: erCb
          }
        console.log('项目结算材料提交参数：', req.data)
        that.$https(req)
      }
    },

    // 资料归档-查询
    dataUploadInfoInit() {
      let that = this,
        suCb = res => {
          console.log('资料归档信息：', res)
          that.dataStatus = that.deepClone(res.data.list)
          let callBack = item => {
            // console.log(item);
            // let _item = item;
            item.data =
              res.data.fileList.filter(mass => {
                return mass.bizType == item.exe_data.bizType
              })[0] || {}
            // return item;
          }
          that.ownerData.map(callBack)
          that.designCheckData.map(callBack)
          that.projectFinishData.map(callBack)
          that.officialData.map(callBack)
          that.movePiontData.map(callBack)
          // that.movePiontData.map(item => {
          //   let _item = item;
          //   _item.data =
          //     res.data.fileList.filter(mass => {
          //       return mass.bizType == _item.exe_data.bizType;
          //     })[0] || {};
          // });
          console.log(that.ownerData)
        },
        erCb = res => {},
        req = {
          url: '/api/web/proProject/queryDetailMaterial',
          methods: 'post',
          data: {
            proId: that.$route.params.info
          },
          success: suCb,
          error: erCb
        }
      that.$https(req)
    },
    // 资料归档-上传
    // uploadData() {},

    // 资料归档-删除文件
    delFile(row) {
      this.$confirm('确认删除吗？')
        .then(_ => {
          let that = this,
            suCb = res => {
              console.log('文件删除', res)
              that.$msg('删除成功')
              that.dataUploadInfoInit()
              that.fileList = []
            },
            erCb = res => {
              console.log(res)
            },
            req = {
              url: '/api/web/sysFile/deleteFile',
              methods: 'post',
              data: {
                fileUrl: row.data.fileUrl.replace(/http.*?(?=up)/, ''),
                parentId: that.$route.params.info
              },
              success: suCb,
              error: erCb
            }
          that.$https(req)
        })
        .catch(_ => {})
    },
    // 上传成功的回调函数
    handleSuccess(res, file, fileList) {
      console.log(res, file, fileList)
      if (res.flag == 1) {
        this.dataUploadInfoInit()
      } else if (res.flag == 2) {
        this.$erMsg('请重新登录')
        this.$router.push({ name: 'login' })
      } else if (res.flag == 0) {
        this.$erMsg('上传失败,格式错误！')
        this.fileList = []
        // this.dataUploadInfoInit();
      }
    },
    // 上传成功后点x 删除函数
    handleRemove(row) {
      console.log(row)
      this.delFile(row)
    },
    handlePreview(file) {
      console.log(file)
    },
    // 限制提示
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    // 删除前提示
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 移动信息 - 查询
    moveInfoInit() {
      let that = this,
        suCb = res => {
          console.log('移动信息查询：', res)
          that.moveSystem = that.deepClone(res.data.moveMap) || {}
          that.moveSystem.moveProId = that.$route.params.info
          that.jumpFiberData = that.deepClone(res.data.skipList)
          that.jumpFiberData.map(item => {
            item.display = true
          })
        },
        erCb = res => {},
        req = {
          url: '/api/web/proMove/queryProMoveByProId',
          methods: 'post',
          data: { moveProId: that.$route.params.info },
          success: suCb,
          error: erCb
        }
      that.$https(req)
    },
    // 移动信息 - 提交编辑
    moveInfoSubmit() {
      if (!this.moveSystemFlag) {
        let that = this,
          suCb = res => {
            console.log(res)
            that.$msg('提交成功')
            that.moveSystemFlag = true
          },
          erCb = res => {},
          postData = that.deepClone(that.moveSystem),
          req = {
            url: '/api/web/proMove/addOrUpdateProMove',
            methods: 'post',
            data: postData,
            // {
            //   moveProId: that.$route.params.info,
            //   openNumber: that.moveSystem.openNumber,
            //   openLink: that.moveSystem.openLink,
            //   receptionNumber: that.moveSystem.receptionNumber,
            //   orEntry: that.moveSystem.orEntry,
            //   oltOrSink: that.moveSystem.oltOrSink,
            //   receiveMode: that.moveSystem.receiveMode,
            //   orLeatherHouse: that.moveSystem.orLeatherHouse,
            //   ftthBuildNumber: that.moveSystem.ftthBuildNumber,
            //   coverNumber: that.moveSystem.coverNumber,
            //   communityManage: that.moveSystem.communityManage,
            //  三个时间转字符串，moveProId从路由里面拿
            //   orderTime: that.moveSystem.orderTime + "",
            //   entryTime: that.moveSystem.entryTime + "",
            //   receptionTime: that.moveSystem.receptionTime + "",
            //   communityNumber: that.moveSystem.communityNumber,
            //   slaTimeout: that.moveSystem.slaTimeout,
            //   moveId: that.moveSystem.moveId,
            //  ponNumber: that.moveSystem.ponNumber
            // },
            success: suCb,
            error: erCb
          }
        // 三个时间戳 转 字符串，moveProId从路由里面拿
        req.data.orderTime += ''
        req.data.entryTime += ''
        req.data.receptionTime += ''
        req.data.moveProId = that.$route.params.info
        console.log('移动信息提交参数：', req.data)
        that.$https(req)
      } else {
        this.$erMsg('先编辑，在提交！')
      }
    },
    // 跳纤信息--添加新的一行
    jumpInfoAdd() {
      this.jumpFiberData.push({ display: false })
    },
    jumpEdit(row) {
      row.display = !row.display
      // 后期再添加 取消编辑 还原显示数据功能
      if (!row.display) {
      }
    },

    // 提交添加或编辑
    jumpInfoSubmit(row) {
      if (row.display == false) {
        row.infoId = this.moveSystem.moveProId
        let that = this,
          suCb = res => {
            console.log(res)
            that.$msg('保存成功！')
            row.display = true
          },
          erCb = res => {},
          req = {
            url: '/api/web/proSkipfiber/addProSkipfiber',
            methods: 'post',
            data: row,
            success: suCb,
            error: erCb
          }
        console.log('跳纤信息提交参数：', req.data)
        // 验证不能全部为空
        if (row.jobNumber || row.receptionSiteNumber || row.siteAttribute) {
          that.$https(req)
        } else {
          that.$erMsg('不能全部为空！')
        }
      } else {
        this.$erMsg('先编辑，在提交！')
      }
    },
    /**
     * 获取项目部文员上传数据后绘图的方法
     */
    getProAmapData() {
      let succ = res => {
        // console.log(res);
        res = res.data
        if (res.flag == 1) {
          res = res.res
          let points = res.mapPointList
          let pro_id = res.proId
          let pro_lnglat = [res.lng, res.lat]
          let details = res.workLoadList
          this.proAmapData.pro_id = pro_id
          this.proAmapData.pro_lnglat = pro_lnglat
          this.proAmapData.points = points
          this.proAmapData.details = details
          this.amapLoading = false
        }
      }
      let err = res => {}
      let params = {
        proId: this.$route.params.info
      }
      let data = {
        url: '/api/web/proProject/queryBudgetWorkLoad',
        methods: 'post',
        data: params,
        success: succ,
        error: err
      }

      if (params.proId) {
        this.$https(data)
      }

      // this.$axios
      //   .post("/apiamap/web/proProject/queryBudgetWorkLoad", params)
      //   .then(succ);

      // mock的模拟数据
      // this.$axios.get("/mock/queryBudgetWorkLoad.json")
      //   .then(res => {
      //     // console.log(res,"axios.get")
      //     succ(res)
      //   })
    },
    /**
     * 获取施工队上传数据后绘图的方法
     */
    getReadOnlyAmapData() {
      let succ = res => {
        res = res.data
        if (res.flag == 1) {
          res = res.res
          // console.log("res", res)
          let points = res.mapPointList
          let pro_id = res.proId
          let pro_lnglat = [res.lng, res.lat]

          this.readOnlyAmapData.pro_id = pro_id
          this.readOnlyAmapData.pro_lnglat = pro_lnglat
          this.readOnlyAmapData.points = points
          this.amapReadOnlyLoading = false
        }
      }
      let err = res => {
        that.$erMsg('网络错误')
      }
      let params = {
        proId: this.$route.params.info
      }
      let data = {
        url: '/api/web/proProject/queryFinalWorkLoad ',
        methods: 'post',
        data: params,
        success: succ,
        error: err
      }
      if (params.proId) {
        this.$https(data);
      }

      // mock的模拟数据
      // this.$axios.get('/mock/queryFinalWorkLoad.json').then(res => {
      //   // console.log(res,"axios.get")
      //   succ(res)
      // })
    }
  },
  watch: {}
}
</script>
<style scoped>
.data-back-sign .tables {
  text-align: left;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #eeeeee;
}
.data-back-sign .tables .box {
  display: flex;
  height: 45px;
  line-height: 45px;
  border-left: 1px solid #eeeeee;
  border-top: 1px solid #eeeeee;
}
.data-back-sign .tables .box:nth-of-type(3n) {
  border-right: 1px solid #eeeeee;
}
.data-back-sign .tables .box > div:first-of-type {
  width: 101px;
  background: #f9fafc;
  text-align: right;
  padding-right: 10px;
  border-right: 1px solid #eeeeee;
}
.data-back-sign .tables .box > div:last-of-type {
  width: 210px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  border-left: none;
}
.data-back-sign .tables .box > div:last-of-type span {
  color: #cccccc;
}
.contain {
  box-sizing: border-box;
  width: 1100px;
  border: 1px solid #e4e4e4;
  margin: 20px auto;
}
.gcl {
  margin-bottom: 20px;
}
.tabs {
  width: 1060px;
  margin: 20px auto;
}
.budget {
  margin-top: 20px;
  width: 100%;
  overflow: hidden;
  background: #f8f8f8;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 14px;
  color: #666;
}
.gcl .title {
  background: #f8f8f8;
  height: 35px;
  line-height: 35px;
  color: #666;
  padding: 0 20px;
  font-size: 14px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
  text-align: left;
}
.budget .title {
  float: left;
}
.budget div:last-of-type {
  float: right;
}
.gcl .tabs {
  width: 1060px;
  margin: 20px;
  box-sizing: border-box;
}
.nav {
  background: #f8f8f8;
  height: 50px;
  font-size: 14px;
  line-height: 50px;
  border-bottom: 1px solid #e4e4e4;
  text-align: left;
  padding-left: 20px;
  font-size: 14px;
  color: #666;
}
.tables table {
  width: 660px;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
}
.budgetTable table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
}
.budgetTable table td {
  /* width: 500px; */
  height: 40px;
}
/*.budgets{*/
/*overflow-x:scroll;*/
/*}*/
.tables table td {
  height: 44px;
}
.tables table td:nth-of-type(2n) {
  text-align: left;
  padding-left: 20px;
}
.tables table td:nth-of-type(2n + 1) {
  text-align: right;
  padding-right: 20px;
  width: 160px;
  background: #f9fafc;
}
.costManage {
  overflow: hidden;
  font-size: 14px;
}
.costManage .left,
.costManage .right {
  float: left;
}
.costManage .left {
  margin-right: 60px;
}

.costManage .costManage_btns {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.costManage .costManage_btns button {
  height: 30px;
  line-height: 30px;
  border: 1px solid #1abc9c;
  background-color: #fff;
  color: #1abc9c;
  border-radius: 3px;
  width: 80px;
  margin: 8px auto;
}

.costManage .costManage_btns button:hover {
  border: 1px solid #1abc9c;
  background-color: #1abc9c;
  color: #fff;
}

.costManage .cost {
  text-align: left;
  color: #949494;
  margin-bottom: 10px;
}
.costManage .left span,
.costManage .right span {
  display: inline-block;
  width: 100px;
  text-align: right;
  padding-right: 10px;
  height: 30px;
  color: #666;
  font-size: 12px;
}
.costManage .left span i,
.costManage .right span i {
  color: red;
  vertical-align: middle;
  font-style: normal;
  padding-right: 2px;
}
.costManage .left input,
.costManage .right input {
  height: 30px;
  padding-left: 5px;
  outline: none;
  border: 1px solid #e4e4e4;
  border-radius: 2px;
}

/* 下面是进度管理的样式 */
.step-container {
  margin: 20px auto;
}

.table-title p {
  font-family: 'PingFangSC-Regular', 'PingFang SC';
  font-weight: 400;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1;
  font-kerning: normal;
  font-size: 16px;
  color: #666;
  text-align: left;
  line-height: 40px;
}

.tables table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
}
.tables table td {
  height: 44px;
}
.tables table td:nth-of-type(2n) {
  text-align: left;
  padding-left: 20px;
  width: 332px;
}
.pipe-progress .tables table td:nth-of-type(2n),
.line-progress .tables table td:nth-of-type(2n),
.equipment-progress .tables table td:nth-of-type(2n) {
  width: 332px;
}
.tables table td:nth-of-type(2n + 1) {
  text-align: right;
  padding-right: 20px;
  width: 160px;
  background: #f9fafc;
}

.component-paging .table-bottom,
.component-paging .table-bottom,
.component-paging .table-bottom {
  width: 100%;
  margin-bottom: 20px;
}

.pipe-progress .table,
.line-progress .table,
.equipment-progress .table {
  margin-top: 20px;
}

/* 材料管理 */
.material-manage .search-header {
  width: 1028px;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.material-manage .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  border-bottom: 0;
}

.material-manage .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-size: 14px;
  line-height: 45px;
  font-weight: 700;
  text-align: left;
  margin: 0 0 0 30px;
}

.material-manage .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.material-manage .right button {
  padding: 0 15px;
  height: 30px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.material-manage .right button:hover {
  background-color: #f3f3f3;
}

/* 资料归档 */
.data-back-sign,
.owner-data,
.design-check-data,
.process-manage-data,
.project-finish-data,
.official-data,
.move-system-data {
  margin: 20px auto;
}
.table-title-left {
  color: #1abc9c;
  font-size: 16px;
  float: right;
}

.gray {
  color: #ccc;
}

/* 删除按钮 */
.red {
  color: #48c9b0;
  font-size: 12px;
  cursor: pointer;
}

.move-system-msg .tables table td:nth-of-type(2n + 1) {
  text-align: right;
  padding-right: 10px;
  width: 140px;
  background: #f9fafc;
}

.move-system-msg .tables table td:nth-of-type(2n) {
  text-align: left;
  padding-left: 0px;
  width: 200px;
}

.table-title > div:last-of-type {
  float: right;
  margin: -45px 20px 10px;
}
.table-title > div:last-of-type span {
  display: inline-block;
  margin-left: 20px;
  padding: 5px 20px;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 4px;
}
.table-title > div:last-of-type span {
  border: 1px solid #e4e4e4;
  color: #666;
  background: #fff;
}
.table-title > div:last-of-type span:last-of-type {
  border: 1px solid #1abc9c;
  color: #fff;
  background: #1abc9c;
}

.img_btn {
  padding: 0px 5px;
  margin: 10px;
  height: 35px;
  line-height: 35px;
  border: 1px solid #1abc9c;
  color: #1abc9c;
  background-color: #fff;
  border-radius: 3px;
}

.img_btn:hover {
  color: #fff;
  background-color: #1abc9c;
}

.f_btn {
  display: inline-block;
  float: right;
  width: 80px;
  height: 30px;
  border: 1px solid #ccc;
  line-height: 30px;
  text-align: center;
  margin-top: 7px;
  margin-right: 10px;
}
.f_btn:hover {
  cursor: pointer;
  background-color: #f3f3f3;
}

/* 工程量管理 按钮组 */
.btn_group {
  text-align: left;
  margin-bottom: 15px;
}
/* 工程量管理 底部 价格显示 */
.gcl_footer {
  text-align: right;
}

.gcl_footer .gcl_footer_top {
  margin-bottom: 10px;
  font-size: 18px;
}

.gcl_footer .gcl_footer_top span:nth-child(2n),
.gcl_footer .gcl_footer_bottom span:nth-child(2n) {
  color: #1abc9c;
}

.gcl_footer .gcl_footer_bottom {
  margin-bottom: 10px;
  font-size: 19px;
}

.budgetTable table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
}
.budgetTable table td,
th {
  height: 40px;
}

th {
  background-color: #f9fafc;
}
/* 建项审批列表最外层容器 pro-amap Start*/
.pro-amap {
  widows: 100%;
}
/* 建项审批列表最外层容器 pro-amap End and 地图容器 Start */
.amap {
  width: 100%;
  height: 500px;
  position: relative;
}
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
/* 地图容器 End and 数据展示列表 Start */
.table {
  width: 100%;
  margin-top: 20px;
}
.table-title {
  text-align: left;
  color: #949494;
  font-size: 16px;
}
.amap-all-table-header {
  display: flex;
  align-items: center;
  margin: 10px 0 20px;
}
.amap-all-table-btn {
  width: 120px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  border: 1px solid #e4e4e4;
}
.amap-all-table-btn:not(:first-child) {
  margin-left: 20px;
}
.amap-all-table-btn-active {
  background: #1abc9c;
  color: #fff;
}
.amap-all-table-header-update {
  margin-left: 300px;
}
/* 数据展示列表 End */
</style>

<!-- 在全局中修改地图的css -->
<style>
.pro-amap .marker-container {
  position: relative;
}
.pro-amap .marker-container img {
  position: absolute;
}
.pro-amap .marker-container div:nth-child(2) {
  color: red;
  position: absolute;
  top: -20px;
  left: 0;
}
.pro-amap .marker-container div:nth-child(3) {
  height: 20px;
  line-height: 20px;
  padding: 3px 6px;
  background: #fff;
  border: 1px solid red;
  position: absolute;
  left: 6px;
  top: 6px;
}
</style>
